<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改节点样式（修改class）</title>
    <style type="text/css">
        .updateStyle{
            background-color: #ffc0cb;
        }
    </style>
</head>
<body>

<div id="container" >

    <div id="other" >
        内容
    </div>
</div>
<button type="button" onclick="addClass()">点击我，进行增加样式</button>
<button type="button" onclick="removeClass()">点击我，进行移除样式</button>
<script type="text/javascript">
    //增加class样式
    function addClass() {
        // 增加 class
        // 1、选中元素
        let other = document.querySelector("#other") ;
        // console.log( other ) ;
        // 2、添加
        // classList 属性 是 整个 class 组成的 列表
        other.classList.add("updateStyle") ;
    }
    //移除对应节点的样式
    function removeClass(){
        // 移除class
        // 1、选中元素
        let other = document.querySelector("#other") ;
        // 2、移除
        other.classList.remove("updateStyle") ;
    }
</script>
</body>
</html>